<!--
 * @Description: 生产数量累计
 * @Author: lwx
 * @Date: 2023-04-07 09:46:46
 * @LastEditors: lwx
 * @LastEditTime: 2023-04-12 08:36:52
-->
<template>
    <div class="process_num">
        <div class="p_title">计划数量
            <span class="p_num" v-for="i in numObj.amount.length">{{ numObj.amount.charAt(i - 1) }}</span>件
        </div>
        <div class="p_title">今日累计生产
            <span class="p_num" v-for="i in numObj.number.length">{{ numObj.number.charAt(i - 1) }}</span>件
        </div>
        <div class="p_title">今日累计OK数
            <span class="p_num" v-for="i in numObj.good.length">{{ numObj.good.charAt(i - 1) }}</span>件
        </div>
        <div class="p_title">今日累计NG数
            <span class="p_num" v-for="i in numObj.ng.length">{{ numObj.ng.charAt(i - 1) }}</span>件
        </div>
    </div>
</template>

<script>
import { dailyOutput } from '@/api/dashboard.js'
import { timerMixins } from '@/common/mixins/timerMixins.js'
export default {
    mixins: [timerMixins],
    name: 'ProcessNum',
    data() {
        return {
            numObj: {
                amount: '00',
                good: '00',
                ng: '00',
                number: '00'
            },
        }
    },
    methods: {
        async initData() {
            const { data } = await dailyOutput()
            this.numObj = {
                amount: data.amount,
                good: data.number,
                ng: data.ng,
                number: data.number + data.ng
            }
            for (const key in this.numObj) {
                this.numObj[key] = this.numObj[key].toString()
                if (this.numObj[key].length===2) {
                    this.numObj[key] = '0' + this.numObj[key]
                }else if (this.numObj[key].length===1){
                    this.numObj[key] = '00' + this.numObj[key]
                }
            }
        }
    },
}
</script>
<style lang='scss' scoped>
.process_num {
    display: flex;
    font-size: .37rem;

    .p_title {
        flex: 1;
        letter-spacing: 3px;
        color: #4380f0;
        text-align: center;
    }

    .p_num {
        display: inline-block;
        width: .469rem;
        height: .5629rem;
        line-height: .5629rem;
        text-align: center;
        background-image: linear-gradient(to top, #072468, #030a37);
        color: #01fff6;
        font-size: .65rem;
        font-family: 'electronicFont';
        margin-right: 5px;
        border: 1px solid #0182c6;
        border-image: linear-gradient(to right, #0182c6, #578aef);
    }
}
</style>